<template>
  <div class='container'>
    <header-nav :user='profile' />
    <van-cell-group>
      <van-cell center title="头像" value="内容" is-link>
        <van-image round fit='cover' @click='$refs.fileRef.click()' :src="profile.user_img" />
        <input type='file' ref='fileRef' hidden @change='onFileChange'>
      </van-cell>
      <van-cell title="昵称" is-link> <span @click='isEditNameShow = true'>{{profile.name}} </span> </van-cell>
      <van-cell title="性别" is-link>
        <div @click='isEditGenderShow=true'>
          <span v-if='profile.gender === null'> 保密</span>
          <span v-else-if='profile.gender == 1'> 女 </span>
          <span v-else>男</span>
        </div>
      </van-cell>
      <van-cell title="个性" @click='isEditGeXinShow=true'>
      </van-cell>
    </van-cell-group>

    <div class='btn' @click='$router.push( "/userinfo" )'> 返回个人中心</div>
    <div class='btn' @click='logout'> 退出登陆</div>
    <van-popup v-model="isEditPhotoShow" position="bottom" :style="{ height: '100%' }">
      <edit-photo @close='isEditPhotoShow=false' v-if='isEditPhotoShow' :user='profile' :file='previewImage' />
    </van-popup>
    <!-- 修改呢称 -->
    <van-popup v-model="isEditNameShow" position="bottom" :style="{ height: '30%' }">
      <edit-name :name='profile' v-if='isEditNameShow' @close='isEditNameShow=false' />
    </van-popup>
    <!-- 修改性别 -->
    <van-popup v-model="isEditGenderShow" position="bottom" :style="{ height: '40%' }">
      <edit-gender :gender='profile' v-if='isEditGenderShow' @close='isEditGenderShow=false' />
    </van-popup>
    <!-- 修改个性签名-->
    <van-popup v-model="isEditGeXinShow" position="bottom" :style="{ height: '100%' }">
      <edit-gexin v-if='isEditGeXinShow' :value='profile' @close='isEditGeXinShow=false' />
    </van-popup>
  </div>
</template>
<script>
import HeaderNav from '@/components/header-nav/'
import EditPhoto from './components/edit-photo.vue'
import EditName from './components/edit-name.vue'
import EditGender from './components/edit-gender.vue'
import EditGeXin from './components/edit-gexin.vue'
import { getProfile } from '@/api/user.js'
import { mapState } from 'vuex'
export default {
  name: 'edit',
  components: {
    HeaderNav,
    EditPhoto,
    'edit-name': EditName,
    'edit-gender': EditGender,
    'edit-gexin': EditGeXin
  },
  data() {
    return {
      previewImage: '',
      isEditPhotoShow: false,
      isEditNameShow: false,
      isEditGeXinShow: false,
      isEditGenderShow: false
    }
  },
  created() {
    if (!this.profile) {
      this.loadProfile()
    }
  },
  watch: {
    userObj() {
      this.$store.commit('setProfile', this.userObj)
    }
  },
  computed: {
    ...mapState(['user', 'profile'])
  },
  methods: {
    async loadProfile() {
      const { data: res } = await getProfile(this.user.id)

      this.$store.commit('setProfile', res[0])
    },
    logout() {
      this.$dialog
        .confirm({
          title: '退出提示',
          message: '确定退出登陆吗'
        })
        .then(() => {
          this.$router.push('/')
          this.$store.commit('setUser', null)
          this.$store.commit('setProfile', null)
        })
        .catch(() => {
          // on cancel
        })
    },
    onFileChange() {
      this.previewImage = this.$refs.fileRef.files[0]
      this.isEditPhotoShow = true
      this.$refs.fileRef.value = ''
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
}
.van-cell-group {
  margin: 10px 0;
}

.btn {
  text-align: center;
  height: 43px;
  line-height: 44px;
  margin-bottom: 5px;
  background-color: #fff;
  font-size: 16px;
}
.van-image {
  width: 36px;
  height: 36px;
  vertical-align: middle;
}
.van-popup {
  background: #eee;
}
</style>
